<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@300&display=swap');

  * {
    box-sizing: border-box;
  }

  body {
    background-color: #6D496E;
    background: url(https://images.unsplash.com/photo-1685115755336-c488e27084a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2531&q=80);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    font-family: 'Big Shoulders Display', cursive;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
  }

  body::after {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #9797beb4;
    z-index: -1;
  }

  .toggle-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto;
    width: 700px;
  }

  .toggle-button span {
    font-size: 4rem;
  }

  .inactive {
    color: #ffffff40;
    transition: 1s ease-in-out;
  }

  .active {
    color: #ffffffcc;
    transition: 1s ease-in-out;
  }

  .toggle {
    display: none;
  }

  .toggle-container {
    background-color: #FFDFD755;
    border-radius: 100px;
    cursor: pointer;
    display: inline-block;
    margin: 0 40px 0;
    width: 400px;
    height: 200px;
    position: relative;
    box-shadow: 2px 2px 1px rgba(65, 65, 65, 0.5), -2px -2px 1px rgba(255, 255, 255, 0.5);
  }

  .toggle-ball {
    background: #fff;
    background: url(https://images.unsplash.com/photo-1685115755336-c488e27084a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2531&q=80);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 180px;
    width: 180px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
    align-items: center;
    justify-content: center;
  }

  .round {
    border-radius: 100px;
    transition: 1s ease-in-out;
  }

  .square {
    border-radius: 0;
    transition: 1s ease-in-out;
  }

  .toggleOn {
    transform: translateX(200px);
    transition: 1s ease-in-out;
  }

  .toggleOff {
    transform: translateX(0px);
    transition: 1s ease-in-out;
  }

  @media (max-width: 800px) {
    .toggle-button {
      transform: scale(60%);
    }
  }

  @media (max-width: 400px) {
    .toggle-button {
      transform: scale(40%);
    }
  }
</style>

<body>
  <div class="toggle-button" id="toggle-button">
    <span id="circle" class="active">Circle</span>
    <input type="checkbox" id="toggle" class="toggle">
    <label for="toggle" class="toggle-container">
      <div class="toggle-ball"></div>
    </label>
    <span id="square" class="inactive">Square</span>
  </div>
</body>
<script>
  const toggleButton = document.querySelector('#toggle-button');
  const toggle = document.querySelector('#toggle');
  const toggleBall = document.querySelector('.toggle-ball');
  const toggleContainer = document.querySelector('.toggle-container');
  const circleLabel = document.querySelector('#circle');
  const squareLabel = document.querySelector('#square');

  toggleButton.addEventListener('change', () => {

    if (toggle.checked) {
      toggleContainer.classList.remove('round');
      toggleContainer.classList.add('square');
      toggleBall.classList.remove('round', 'toggleOff');
      toggleBall.classList.add('square', 'toggleOn');
      squareLabel.classList.remove('inactive');
      squareLabel.classList.add('active');
      circleLabel.classList.remove('active');
      circleLabel.classList.add('inactive');
    } else {
      toggleContainer.classList.remove('square');
      toggleContainer.classList.add('round');
      toggleBall.classList.remove('square', 'toggleOn');
      toggleBall.classList.add('round', 'toggleOff');
      squareLabel.classList.remove('active');
      squareLabel.classList.add('inactive');
      circleLabel.classList.remove('inactive');
      circleLabel.classList.add('active');
    }

  });
</script>

</html>